<template>
  <div class="main">
    <div id="left" class="sale-size">123</div>
    <div id="right">456</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { saleRoomInfo, saleRegionCollect } from '@/api/service'
import { dayjs } from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      collectType: 1,
      start: dayjs('2022-10-01').format('YYYY-MM-DD'),
      end: dayjs('2022-10-08').format('YYYY-MM-DD')
    }
  },
  computed: {},
  watch: {},
  created() {
    this.saleRoom()
    this.saleRegion()
  },
  methods: {
    async saleRoom() {
      const { data } = await saleRoomInfo(this.collectType, this.start, this.end)
      console.log(data)
      const leftChart = document.getElementById('left')
      const myChart = echarts.init(leftChart)
      const option = {
        title:
    {
      show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: '销售额趋势图', // 主标题文本，'\n'指定换行
      link: '', // 主标题文本超链接,默认值true
      target: null, // 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      sublink: '', // 副标题文本超链接
      subtarget: null, // 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      x: 'center', // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      textAlign: null, // 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
      backgroundColor: 'rgba(0,0,0,0)', // 标题背景颜色，默认'rgba(0,0,0,0)'透明
      borderColor: '#ccc', // 标题边框颜色,默认'#ccc'
      borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
      padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
      itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
      textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        fontSize: 14,
        fontWeight: 600,
        fontStyle: 'normal'
      }

    },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          name: '单位/元',
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'line',
            smooth: true,
            lineStyle: { // 设置线条的style等
              normal: {
                color: 'red' // 折线线条颜色:红色
              }
            },
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: 'red'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [ // 渐变颜色
                  {
                    offset: 0,
                    color: '#fe9999'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ],
                global: false
              }
            },
            emphasis: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5 // 关键在这
            },
            select: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5
            }

          }
        ]
      }
      option && myChart.setOption(option)
    },
    async saleRegion() {
      const { data } = await saleRegionCollect(this.start, this.end)
      console.log(data)
      const rightChart = document.getElementById('right')
      const myChart = echarts.init(rightChart)
      const option = {
        title: {
          show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: '销售额分布', // 主标题文本，'\n'指定换行
          link: '', // 主标题文本超链接,默认值true
          target: null, // 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
          sublink: '', // 副标题文本超链接
          subtarget: null, // 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
          x: 'center', // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'top', // 垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textAlign: null, // 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
          backgroundColor: 'rgba(0,0,0,0)', // 标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: '#ccc', // 标题边框颜色,默认'#ccc'
          borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
          padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            fontWeight: 600,
            fontStyle: 'normal'
          }

        },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          name: '单位/元',
          type: 'value'
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'bar',
            smooth: true,
            barWidth: '6%',
            itemStyle: {
              // 设置线条上点的颜色（和图例的颜色）
              normal: {
                color: '#91b0ff'
              }
            },
            emphasis: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5 // 关键在这
            },
            select: {
              areaColor: '#FFF',
              shadowColor: '#215380',
              shadowOffsetY: 5
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .main {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  #left {
        position: relative;
    left: 0px;
    top: 0px;
    width: 50%;

    height: 278px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }
  #right {
        position: relative;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 278px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }
  .sale-size {
        padding: 12px;
  }
</style>
